<template>
  <div>
    <!-- <el-row>
      <el-col :span="2">
        <div class="grid-content bg-color-light-blue">列1</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-orange">列2</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-light-blue">列1</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-orange">列2</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-light-blue">列1</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-orange">列2</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-light-blue">列1</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-orange">列2</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-light-blue">列1</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-orange">列2</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-light-blue">列1</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-orange">列2</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-color-light-blue">列1</div>
      </el-col>
    </el-row> -->
  </div>
</template>
 
<script>
export default {
  name: "GridExample"
};
</script>
 
<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 6px;
}
.bg-color-light-blue {
  background: #a0cfff;
}
.bg-color-orange {
  background: #ffd86e;
}
.bg-color-green {
  background: #a0f986;
}
.bg-color-red {
  background: #ff8e7e;
}
.grid-content {
  border: 1px solid #eaeaea;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 66px;
}
</style>